<template>
  <div class="recommend">
    <div class="title"></div>
    <el-tag type="success">{{ type }}为你服务</el-tag>
    <div class="container">
      <div class="box" v-for="(item, index) in data" :key="index">
        <img :src="'http://housekeepi.com/' + item.icon" alt="" />
        <h2>{{ item.nick_name }}</h2>
        <p>{{ item.content }}</p>
        <el-button type="success" round @click="btn(item)">查看详情</el-button>
      </div>
    </div>
    <!-- //nick_name  家政人员名字   work_type 工作类型  phone  h_price 时薪 -->
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      type: "",
      data: [],
    };
  },
  computed: {
    idx() {
      return this.$store.state.idx;
    },
    // ...mapState
  },
  watch: {
    idx() {
      this.up();
    },
  },
  methods: {
    ...mapMutations(["ITEM", "CHOOSE"]),
    btn(item) {
      console.log(item);
      this.ITEM(item);
      this.jump();
    },
    jump() {
      let url = {};
      url.path = "/moreinfo";
      this.$router.push(url);
    },
    up() {
      this.myaxios({
        url: "http://housekeepi.com/api/workUserList",
        method: "post",
        data: {
          page: "1",
          size: "8",
          province: "四川省",
          city: "成都市",
          work_type: this.idx,
        },
      })
        .then((e) => {
          this.data = e.data.data.data;
          console.log(this.data);
          if (this.data[0].work_type == 1) {
            this.type = "月嫂";
          } else if (this.data[0].work_type == 2) {
            this.type = "保洁";
          } else if (this.data[0].work_type == 3) {
            this.type = "家政";
          }
          this.$store.state.choose = this.type;
        })
        .catch(() => {
          console.log("error");
        });
    },
  },
  mounted() {
    this.myaxios({
      url: "http://housekeepi.com/api/workUserList",
      method: "post",
      data: {
        page: "1",
        size: "8",
        province: "四川省",
        city: "成都市",
        work_type: this.idx,
      },
    })
      .then((e) => {
        this.data = e.data.data.data;
        console.log(this.data);
        if (this.data[0].work_type == 1) {
          this.type = "月嫂";
        } else if (this.data[0].work_type == 2) {
          this.type = "保洁";
        } else if (this.data[0].work_type == 3) {
          this.type = "家政";
        }
        this.$store.state.choose = this.type;
      })
      .catch(() => {
        console.log("error");
      });
  },
};
</script>

<style scoped>
* {
  text-align: center;
}
.el-tag {
  font-size: 32px;
  border-left: 8px solid springgreen !important;
}
.el-image {
  margin-bottom: 20px;
}
.container {
  /* width: 1200px; */
  /* text-align: center; */
  margin: 20px auto;
  columns: 3;
  column-gap: 40px;
}
.container .box {
  width: 100%;
  margin: 0 0 20px;
  box-sizing: border-box;
  padding: 10px;
  /* background: #333; */
  background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
  overflow: hidden;
  break-inside: avoid;
}
.container .box img {
  max-width: 100%;
}
.container .box h2 {
  margin: 10px 0 0;
  padding: 0;
  font-size: 20px;
}
.container .box p {
  margin: 0;
  padding: 0 0 10px;
  font-size: 16px;
}
</style>